<template>
	<view >
		<view class="product">
			<view class="box" v-for="(item,index) in list" :key="index"  @click="togoodsinfo(item)"
			:style="{'background':index==0&&logo==true?'#fff8f7':index==1&&logo==true?'#fbfaff':''}">
				<view class="product_img">
					<!-- <image :src="item.url"></image> -->
					<image :src="loading==true?'../static/load.png':item.url" @load="load()"></image>
					<!-- <view class="spinner" v-else>
						<view class="double-bounce1"></view>
						<view class="double-bounce2"></view>
					</view> -->
					<!-- <image v-if="logo&&!loading" class="re" src="../../static/rx.png"></image> -->
					<!-- <image v-if="logo" class="re" src="../../static/image/rx.png"></image> -->
				</view>
				<view class="info">
					<view class="title">{{item.goods_name}}</view>
					<!-- ship_method  1邮寄 2当日达  -->
					<!-- <view class="text">现货发售</view> -->
					<view class="logobox" style="background-color: cornflowerblue;" v-if="item.ship_method==1">邮寄</view>
					<view class="logobox" style="background-color: brown;" v-if="item.ship_method==2">当日达</view>
					<view class="price">
						<view class="x_price"><text>￥</text>{{item.goods_price_min}}</view>
						<view class="y_price" v-if="parseInt(item.line_price_min)>0" style="text-decoration: line-through;">￥{{item.line_price_min}}</view>
					</view>
				</view>
				<image v-if="index==0&&logo==true" class="logo" src="../static/bg2.png"></image>
				<image v-if="index==1&&logo==true" class="logo" src="../static/bg3.png"></image>
			</view>
		</view>
		<kong v-if="list.length==0"></kong>
	</view>
</template>

<script>
import kong from '../../components/kong.vue'
import product from '../../components/goods.vue'
export default {
	components:{
		kong,product
	},
	data() {
		return {
			world: '',
			page: 1,
			list: [],
			loading: false,
			isEnd: true
		}
	},
	onLoad(options) {
		this.world = options.world
		uni.setNavigationBarTitle({ title: options.world })
		this.getList()
	},
	onReachBottom() {
		this.isEnd&&this.getList()
	},
	methods: {
		getList(){
			this.$http({
				url: 'api/wechat/searchGoods',
				data: {
					page_index: this.page,
					page_size: 10,
					keyword: this.world
				}
			}).then(res=>{
				console.log(this.list,res.data,'res.data')
				if(res.data.length){
					this.list.push(...res.data)
					this.page++
					return
				}
				this.isEnd = false
			})
		},
		// async getList() {
		// 	if (this.loading || this.isEnd) {
		// 		return
		// 	}
		// 	this.loading = true
		// 	try {
		// 		let res = await
		// 		this.list = [...this.list, ...res.data]
		// 		console.log(this.list,res.data,'res.data')
		// 		this.page++
		// 		if (res.data.length < 10) {
		// 			this.isEnd = true
		// 		}
		// 	} finally {
		// 		this.loading = false
		// 	}
		// },
		toDetail(item){
			uni.navigateTo({ url: '/pages/goodsinfo/goodsinfo?id='+item.id })
		}
	}
}
</script>

<style lang="scss" scoped>
	.product {
		width: 690rpx;
		padding-top: 24rpx;
		margin: 0 auto 0 auto;
		background-color: #FFF;
		// padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 18rpx;
		box-sizing: border-box;
	}
	.box {
		width: 336rpx;
		min-height: 520rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #fff;
		position: relative;
		.logo{
			position: absolute;
			bottom: 0;
			right: 0;
			width: 83rpx;
			height: 63rpx;
		}
		.product_img {
			width: 336rpx;
			height: 336rpx;
			// background: #C6CA53;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			flex-shrink: 0;
			position: relative;
			image{
				width: 336rpx;
				height: 336rpx;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
			}
			.re{
				position: absolute;
				left:0;
				width: 82rpx;
				height: 70rpx;
			}
		}
	
		.info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 22rpx;
			padding: 14rpx;
			height: 100%;
			.title {
				font-size: 30rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				line-height: 32rpx;
			}
			.logobox{
				width: fit-content;
				padding: 0 15rpx;
				border-radius: 13rpx;
				color: #FFF;
				height: 35rpx;
				line-height: 35rpx;
				font-size: 26rpx;
			}
			.text {
				font-size: 20rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #888888;
				line-height: 22rpx;
			}
	
			.price {
				display: flex;
				// justify-content: space-between;
				align-items: center;
				overflow: hidden;
	
				.x_price {
					font-size: 36rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #F94D29;
	
					text {
						font-size: 24rpx;
					}
				}
	
				.y_price {
					font-size: 26rpx;
					font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
					font-weight: normal;
					color: #888888;
				}
			}
		}
	
	}
	
</style>
